<template>
    <h3>体验分</h3>
    <div class="topdata">
        <n-form label-placement="left">
            <n-space>
                <n-form-item label="体验分" label-width="60">
                    <n-space>
                        <n-input-number size="small" v-model:value="initTiyangfenData.expr_score.main_compass.val"
                            :step="1" :style="{ width: '100px' }" placeholder="体验分" />
                        <!-- <n-switch size="small" v-model:value="initTiyangfenData.expr_score.main_compass.show_val" /> -->
                    </n-space>
                </n-form-item>
                <n-form-item label="较前1天" label-width="70">
                    <n-space>
                        <n-radio-group size="small" name="radiobuttongroup1"
                            v-model:value="initTiyangfenData.expr_score.main_compass.icon_type">
                            <n-radio-button v-for="song in songs" :key="song.value" :value="song.value"
                                :label="song.label" />
                        </n-radio-group>
                        <!-- <n-switch size="small"
                            v-model:value="initTiyangfenData.expr_score.main_compass.show_icon_typs" /> -->
                    </n-space>
                </n-form-item>
                <n-form-item label="%" label-width="70"
                    v-show="initTiyangfenData.expr_score.main_compass.icon_type != 0">
                    <n-space>
                        <n-input-number size="small" v-model:value="initTiyangfenData.expr_score.main_compass.val_num"
                            :step="1" :style="{ width: '100px' }" placeholder="体验分" />
                        <!-- <n-switch size="small" v-model:value="initTiyangfenData.expr_score.main_compass.show_sub_val" /> -->
                    </n-space>
                </n-form-item>
            </n-space>
            <n-space>
                <n-form-item :label="items.title" v-for="(items, index) in initTiyangfenData.expr_score.compass_list"
                    :key="index" :label-width="(() => {
                            return items.title == '物流' || items.title == '服务' ? 100 : 60
                        })()">
                    <n-space>
                        <n-input-number size="small" v-model:value="items.val" :step="1" :style="{ width: '100px' }"
                            :placeholder="items.title" />
                        <!-- <n-switch size="small" v-model:value="items.status" /> -->
                    </n-space>
                </n-form-item>
            </n-space>
            <n-space>
                <n-form-item :label="iter.name"
                    v-for="(iter, index) in initTiyangfenData.shop_data_info.shop_data_item_list" :key="index"
                    :label-width="(() => {
                            return iter.name == '可提现金额' || iter.name == '信誉等级' ? 100 : 60
                        })()">
                    <n-space>
                        <n-input-number size="small" v-model:value="iter.val_num" :step="1" :style="{ width: '100px' }"
                            :placeholder="iter.name" />
                        <div v-if="iter.name == '可提现金额' || iter.name == '保证金'">
                            {{ uetUter(iter.val_num) }}
                        </div>
                        <!-- <n-switch size="small" v-model:value="iter.status" /> -->
                    </n-space>
                </n-form-item>
            </n-space>
        </n-form>
        <n-space>
            <n-button strong secondary type="success" @click="savaDataInStorege('initTiyangfenData', fromaterData())">
                保存
            </n-button>
            <n-switch size="small" v-model:value="initTiyangfenData.show_chear" @update-value="chengeDataFunc" />
        </n-space>
    </div>
</template>

<script lang="ts" setup>
import { inject } from 'vue';
import { uetUter } from './setUter.ts'
import { NForm, NFormItem, NInputNumber, NSwitch, NSpace, NRadioGroup, NRadioButton, NButton } from 'naive-ui';

const { initTiyangfenData, savaDataInStorege } = inject('initTiyangfenData') as any

// const showAllconter = ref(true)
const chengeDataFunc = (val: boolean) => {
    console.log(val)
}
function fromaterData() {
    initTiyangfenData.value.shop_data_info.shop_data_item_list.forEach((item: any) => {
        item.val = item.key !== "honor_level" ? `￥${uetUter(item.val_num)}` : item.val_num
    })
    initTiyangfenData.value.expr_score.compass_list.forEach((item: any) => {
        if (item.val > 80) {
            item.word = {
                "word": "高",
                "word_color": "#00C87F",
                "word_bkg": "219,255,239,1"
            }
            return
        }
        if (item.val < 50) {
            item.word = {
                "word": "低",
                "word_color": "#FF0000",
                "word_bkg": "255,229,229,1"
            }
            return
        }
        item.word = {
            "word": "中",
            "word_color": "#1966FF",
            "word_bkg": "229,240,255,1"
        }
    })
    initTiyangfenData.value.expr_score.main_compass.sub_val = initTiyangfenData.value.expr_score.main_compass.val_num + '%'
    return initTiyangfenData.value
}
const songs = [{
    value: 17,
    label: '升'
}, {
    value: 0,
    label: '平'
}, {
    value: 18,
    label: '下降'
}]

</script>